<template>
    <!-- 表单项，包含保存按钮 -->
    <el-form-item>
        <el-button @click="AddClinet">保存</el-button>
    </el-form-item>
    <!-- 客户档案标题，设置了左边距 -->
    <h2 style="margin-left: 400px;">客户档案</h2>

    <!-- 基本信息部分 -->
    <div>
        <table class="custom-table">
            <!-- 基本信息标题行 -->
            <tr>
                <td colspan="8" style="text-align: left;">基本信息</td>
            </tr>
            <!-- 客户名称、客户编号、客户类别、跟进方式行 -->
            <tr>
                <td style="width: 100px;">客户名称：</td>
                <td><el-input v-model="form.clientName" placeholder="请输入客户名称" style="width: 110px;"/></td>
                <td style="width: 100px;">客户编号：</td>
                <!-- 禁用输入框，防止用户手动输入 -->
                <td><el-input v-model="form.clientNumber" style="width: 110px;" disabled/></td>
                <td style="width: 100px;">客户类别：</td>
                <td>
                    <el-select v-model="form.clientType" placeholder="请选择客户类别">
                        <el-option label="汽车行业" value="汽车行业" />
                        <el-option label="电子行业" value="电子行业" />
                        <el-option label="食品行业" value="食品行业" />
                        <el-option label="医疗行业" value="医疗行业" />
                        <el-option label="工程行业" value="工程行业" />
                    </el-select>
                </td>
                <td style="width: 100px;">跟进方式：</td>
                <td>
                    <el-select v-model="form.followMethods" placeholder="请选择跟进方式">
                        <el-option label="电话跟进" value="电话跟进" />
                        <el-option label="面谈" value="面谈" />
                        <el-option label="微信跟进" value="微信跟进" />
                        <el-option label="QQ跟进" value="QQ跟进" />
                        <el-option label="邮箱跟进" value="邮箱跟进" />
                    </el-select>
                </td>
            </tr>
            <!-- 来源途径、所属行业、客户价值、客户等级行 -->
            <tr>
                <td style="width: 100px;">来源途径：</td>
                <td style="width: 110px;">
                    <el-select v-model="form.sourceRoute" placeholder="请选择来源途径" style="width: 110px;">
                        <el-option label="现有客户" value="现有客户" />
                        <el-option label="当地资讯" value="当地资讯" />
                        <el-option label="网络平台" value="网络平台" />
                        <el-option label="展会" value="展会" />
                        <el-option label="外出拜访" value="外出拜访" />
                        <el-option label="供应商" value="供应商" />
                        <el-option label="推广" value="推广" />
                        <el-option label="市场挖掘" value="市场挖掘" />
                    </el-select>
                </td>
                <td style="width: 100px;">所属行业：</td>
                <td style="width: 110px;">
                    <el-select v-model="form.industry" placeholder="请选择所属行业">
                        <el-option label="零售" value="零售" />
                        <el-option label="制造" value="制造" />
                        <el-option label="制药厂" value="制药厂" />
                        <el-option label="工程" value="工程" />
                        <el-option label="原厂商" value="原厂商" />
                        <el-option label="服务商" value="服务商" />
                        <el-option label="代理商" value="代理商" />
                        <el-option label="金融业" value="金融业" />
                        <el-option label="教育" value="教育" />
                        <el-option label="医疗" value="医疗" />
                        <el-option label="互联网" value="互联网" />
                        <el-option label="传媒" value="传媒" />
                    </el-select>
                </td>
                <td>客户价值：</td>
                <td>
                    <el-select v-model="form.customerValue" placeholder="请选择客户价值">
                        <el-option label="很高" value="很高" />
                        <el-option label="较高" value="较高" />
                        <el-option label="一般" value="一般" />
                        <el-option label="较低" value="较低" />
                        <el-option label="很低" value="很低" />
                    </el-select>
                </td>
                <td>客户等级：</td>
                <td>
                    <el-select v-model="form.creditRating" placeholder="请选择客户等级">
                        <el-option label="高" value="高" />
                        <el-option label="中" value="中" />
                        <el-option label="低" value="低" />
                    </el-select>
                </td>
            </tr>
            <!-- 公司地址行 -->
            <tr>
                <td>公司地址：</td>
                <td colspan="7"><el-input v-model="form.companyAddress" placeholder="请输入公司地址"/></td>
            </tr>
            <!-- 公司简介行 -->
            <tr>
                <td>公司简介：</td>
                <td colspan="7"><el-input v-model="form.companyProfile" type="textarea" /></td>
            </tr>
        </table>
    </div>

    <!-- 主要联系人信息部分 -->
    <div>
        <table class="custom-table">
            <!-- 主要联系人信息标题行 -->
            <tr>
                <td colspan="8" style="text-align: left;">主要联系人信息</td>
            </tr>
            <!-- 联系人姓名、性别、部门、生日行 -->
            <tr>
                <td style="width: 110px;">联系人姓名：</td>
                <td><el-input v-model="form.contactName" placeholder="请输入联系人姓名"/></td>
                <td style="width: 80px;">性别：</td>
                <td>
                    <el-radio-group v-model="form.sex">
                        <el-radio :value="1" checked>男</el-radio>
                        <el-radio :value="0">女</el-radio>
                    </el-radio-group>
                </td>
                <td>部门：</td>
                <td><el-input v-model="form.department" placeholder="请输入部门"/></td>
                <td>生日：</td>
                <td>
                    <el-col :span="11">
                        <el-date-picker
                            v-model="form.birthday"
                            type="date"
                            placeholder="Pick a date"
                            style="width: 120px"
                        />
                    </el-col>
                </td>
            </tr>
            <!-- 职务、手机、办公电话、电子邮件行 -->
            <tr>
                <td>职务：</td>
                <td><el-input v-model="form.office" placeholder="请输入职务"/></td>
                <td>手机：</td>
                <td><el-input v-model="form.phone" placeholder="请输入手机"/></td>
                <td style="width: 110px;">办公电话：</td>
                <td><el-input v-model="form.officePhone" placeholder="请输入办公电话"/></td>
                <td style="width: 110px;">电子邮件：</td>
                <td><el-input v-model="form.email" placeholder="请输入电子邮件"/></td>
            </tr>
            <!-- QQ、微信行 -->
            <tr>
                <td>QQ：</td>
                <td><el-input v-model="form.qq" placeholder="请输入QQ："/></td>
                <td>微信:</td>
                <td><el-input v-model="form.weChat" placeholder="请输入微信"/></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>

    <!-- 财务信息部分 -->
    <div>
        <table class="custom-table">
            <!-- 财务信息标题行 -->
            <tr>
                <td colspan="8" style="text-align: left;">财务信息</td>
            </tr>
            <!-- 账户名称、纳税人识别号、地址、电话行 -->
            <tr>
                <td style="width: 110px;">账户名称：</td>
                <td><el-input v-model="form.financialName" placeholder="请输入账户名称"/></td>
                <td style="width: 130px;">纳税人识别号：</td>
                <td><el-input v-model="form.taxpayernumber" placeholder="请输入纳税人识别号"/></td>
                <td style="width: 90px;">地址：</td>
                <td><el-input v-model="form.address" placeholder="请输入地址"/></td>
                <td style="width: 90px;">电话：</td>
                <td><el-input v-model="form.telephone" placeholder="请输入电话"/></td>
            </tr>
            <!-- 开户银行、银行账号行 -->
            <tr>
                <td>开户银行：</td>
                <td><el-input v-model="form.bankDeposit" placeholder="请输入开户银行"/></td>
                <td>银行账号：</td>
                <td><el-input v-model="form.account" placeholder="请输入银行账号"/></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>

    <!-- 业务信息部分 -->
    <div>
        <table class="custom-table">
            <!-- 业务信息标题行 -->
            <tr>
                <td style="text-align: left;" colspan="8">业务信息</td>
            </tr>
            <!-- 合作现状行 -->
            <tr>
                <td>合作现状：</td>
                <td><el-input v-model="form.statusCooperation" type="textarea" /></td>
            </tr>
            <!-- 合作前景行 -->
            <tr>
                <td>合作前景：</td>
                <td><el-input v-model="form.prospectsCooperation" type="textarea" /></td>
            </tr>
            <!-- 跟进策略行 -->
            <tr>
                <td>跟进策略：</td>
                <td><el-input v-model="form.followStrategy" type="textarea" /></td>
            </tr>
        </table>
    </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { Wread, Wwrite } from "@/axios/axiosHelper";

// 获取路由实例
const router = useRouter()

// 定义表单数据响应式对象
const form = reactive({
    clientName: '',
    clientNumber: '',
    clientType: '',
    followMethods: '',
    sourceRoute: '',
    industry: '',
    customerValue: '',
    creditRating: '',
    companyAddress: '',
    companyProfile: '',
    contactName: '',
    sex: 1, // 默认值为1，表示男
    department: '',
    birthday: '',
    office: '',
    phone: '',
    officePhone: '',
    email: '',
    qq: '',
    weChat: '',
    financialName: '',
    taxpayernumber: '',
    address: '',
    telephone: '',
    bankDeposit: '',
    account: '',
    statusCooperation: '',
    prospectsCooperation: '',
    followStrategy: '',
})

// 生命周期钩子函数，在组件挂载后执行
onMounted(() => {
    generateClientNumber();
})

// 生成客户编号的函数
const generateClientNumber = () => {
    let letters = '';
    // 生成前四位大写英文字母
    for (let i = 0; i < 4; i++) {
        letters += String.fromCharCode(65 + Math.floor(Math.random() * 26));
    }
    let numbers = '';
    // 生成后十位随机数字
    for (let i = 0; i < 10; i++) {
        numbers += Math.floor(Math.random() * 10);
    }
    return letters + numbers;
}

// 组件挂载后生成客户编号并赋值给表单
onMounted(() => {
    form.clientNumber = generateClientNumber();
})

// 保存客户信息的函数
const AddClinet = () => {
    Wwrite.post("w2-write/api/Client/CraeteClient", form)
      .then(res => {
            if (res.data.code === 100) {
                ElMessage.success(res.data.msg);
            } else {
                ElMessage.error(res.data.msg);
            }
        })
}
</script>

<style scoped>
.custom-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.custom-table td {
    border: 1px solid #ccc;
    padding: 8px;
}

.custom-table tr:first-child td {
    background-color: #f2f2f2;
    font-weight: bold;
    text-align: center;
}

.el-input,
.el-select {
    width: 100%;
}

.el-textarea__inner {
    width: 100%;
}
</style>